<template>
  <a-modal
    :title="title"
    :width="880"
    ref="editTeam"
    :visible="visible"
    :confirmLoading="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row>
          <a-col :span="24">
            <span class="i">当前角色名称： {{ roleName }}</span>
          </a-col>
          <a-col :span="24">
            <a-button style="float:left; margin:12px 10px" @click="checkALL()">全部勾选</a-button>
            <a-button style="float:left; margin:12px 10px" @click="cancelCheckALL()">取消全选</a-button>
            <a-button style="float:left; margin:12px 10px" @click="switchCheckStrictly(1)">父子关联</a-button>
            <a-button style="float:left; margin:12px 10px" @click="switchCheckStrictly(2)">取消父子关联</a-button>
            <a-button style="float:left; margin:12px 10px" @click="expandAll()">展开</a-button>
            <a-button style="float:left; margin:12px 10px" @click="closeAll()">收缩</a-button>
            <a-button style="float:left; margin-top: 12px;" type="primary" @click="handleSubmit">保存</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-card :bordered="false">
      <a-form>
        <a-form-item label="所拥有的权限" style="margin-left:50px">
          <a-tree
            checkable
            @check="onCheck"
            :checkedKeys="checkedKeys"
            :treeData="treeData"
            @expand="onExpand"
            @select="onTreeNodeSelect"
            :selectedKeys="selectedKeys"
            :expandedKeys="expandedKeysss"
            :checkStrictly="checkStrictly"
          ></a-tree>
        </a-form-item>
      </a-form>
    </a-card>
  </a-modal>
</template>

<script>
import { putAction, deleteAction, postForm, postAction, getAction } from '@/api/manage'
const columns = [
  {
    title: '菜单管理',
    dataIndex: 'title',
    width: '50%',
  },
  {
    title: 'component',
    dataIndex: 'component',
    width: '50%',
  },
]

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  },
}

export default {
  data() {
    return {
      dataFile: [],
      powerFile: [],
      columns,
      rowSelection,
      selectedRowKeys: [],
      selectionRows: [],
      roleId: '',
      roleName: '',
      treeData: [],
      defaultCheckedKeys: [],
      checkedKeys: [],
      expandedKeysss: [],
      allTreeKeys: [],
      autoExpandParent: true,
      checkStrictly: false,
      title: '角色权限配置',
      visible: false,
      selectedKeys: [],
    }
  },
  created() {
    this.powerFile = localStorage.getItem('dataFales')
    console.log(this.powerFile)
    this.roleName = this.powerFile.name
    this.loadData()
  },
  methods: {
    cancel() {
      this.$router.go(-1)
    },

    handleOk(e) {
      this.visible = false
    },
    handleCancel(e) {
      this.visible = false
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
      console.log(selectionRows)
    },

    onTreeNodeSelect(selectedKeys) {
      // if (id && id.length > 0) {
      this.selectedKeys = selectedKeys
      // }
      // this.$refs.datarule.show(this.selectedKeys[0], this.roleId)
    },
    onCheck(o) {
      console.log(o)
      if (this.checkStrictly) {
        this.checkedKeys = o.checked
      } else {
        this.checkedKeys = o
      }
    },
    show(roleId) {
      this.roleId = roleId
      this.visible = true
    },
    close() {
      this.reset()
      this.visible = false
    },
    onExpand(expandedKeys) {
      this.expandedKeysss = expandedKeys
      this.autoExpandParent = false
    },
    reset() {
      this.expandedKeysss = []
      this.checkedKeys = []
      this.defaultCheckedKeys = []
    },
    expandAll() {
      this.expandedKeysss = this.allTreeKeys
    },
    closeAll() {
      this.expandedKeysss = []
    },
    checkALL() {
      this.checkedKeys = this.allTreeKeys
    },
    cancelCheckALL() {
      //this.checkedKeys = this.defaultCheckedKeys
      this.checkedKeys = []
    },
    switchCheckStrictly(v) {
      if (v == 1) {
        this.checkStrictly = false
      } else if (v == 2) {
        this.checkStrictly = true
      }
    },

    handleSubmit(exit) {
      let that = this
      let powerFiles = JSON.parse(this.powerFile)
      let params = Object.assign({
        ids: that.checkedKeys,
        roleId: powerFiles.id,
      })
      console.log('请求参数：', params)
      postAction('/api/menus/add', params).then((res) => {
        if (res.code == 0) {
          this.dataFile = res.result
          console.log(this.dataFile)
          this.$message.success('修改成功!')
          this.$router.go(-1)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    loadData() {
      getAction('/api/menus/build/tree').then((res) => {
        if (res.code == 0) {
          this.treeData = res.result.treeList
          this.allTreeKeys = res.result.ids
          this.expandedKeysss = this.allTreeKeys
          let powerFiles = JSON.parse(this.powerFile)
          this.checkedKeys = powerFiles.menu.map(Number) //选择值
          this.defaultCheckedKeys = powerFiles.menu.map(Number) //选择值
          console.log('11111:')
          console.log(this.checkedKeys)
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
  },
  watch: {
    visible() {
      if (this.visible) {
        this.loadData()
      }
    },
  },
}
</script>

<style lang="less">
.table-page-search-wrapper {
  .ant-col-24 {
    .i {
      font-weight: 600;
      color: #333;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      margin-left: 10px;
    }
  }
}
</style>
